* {
  box-sizing: border-box !important;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  --main-color: #333333;
  --gray-color: #555555;
  --danger-color: #f56c6c;
  --warning-color: #f0ad4e;
  --success-color: #5cbb7a;
  --primary-color: #409eff;
  --info-color: #8896b3;

  --border-base-color: #dcdfe6;
  --border-light-color: #e4e7ed;
  --border-lighter-color: #eveef5;

  --black-color-0: #ffffff;
  --black-color-5: #eeeeee;
  --black-color-10: #dddddd;
  --black-color-15: #cccccc;
  --black-color-20: #bbbbbb;
  --black-color-25: #aaaaaa;
  --black-color-30: #989898;
  --black-color-35: #828282;
  --black-color-40: #666666;
  --black-color-45: #545454;
  --black-color-50: #454545;
  --black-color-55: #353535;
  --black-color-60: #252525;
  --black-color-65: #101010;
  --black-color-70: #111111;

  --border-radius: 5px;

  --background-color: #F3F3F7
}

html {
  background-color: var(--black-color-40);
}

body {
  background-color: var(--black-color-0);
  width: 100%;
  max-width: 768px;
  margin: 0 auto !important;
}

a {
  text-decoration: none;

  &:hover, &:focus, &:active, &:link, &:visited {
    text-decoration: none;
  }
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  outline: none;
  resize: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clear {
  clear: both;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

#app {
  width: 100%;

}

.container {
  width: 90%;
  margin: 0 auto;
}

[class*='icon-'] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}